<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML5 绘图</title>
    <style>
      .canvas {
        border: 1px solid #ccc;
        cursor: crosshair;
      }
    </style>
  </head>
  <body>
    <input type="button" value="重放" id="btn1" />
    <input type="button" value="清空" id="btn2" />
    <input type="button" value="保存" id="btn3" />

    <br />
    <canvas id="cvs" class="canvas"></canvas>
  </body>
</html>
<script>
  class Draw {
    constructor(selector, width, height) {
      this.element = document.querySelector(selector);
      this.canvas = this.element.getContext("2d");
      this.element.width = width;
      this.element.height = height;
      this.timeId = null;
      this.animateArr = [];
    }
    init() {
      const { canvas: c, element: el } = this;
      let isDrag = false;

      c.lineWidth = 2;
      c.lineJoin = "round";
      c.shadowColor = "#000";
      c.shadowBlur = 4;

      el.onmousedown = () => {
        isDrag = true;
        c.beginPath();
      };
      el.onmousemove = (e) => {
        if (isDrag) {
          const x = e.pageX - el.offsetLeft;
          const y = e.pageY - el.offsetTop;
          c.lineTo(x, y);
          c.stroke();
          this.animateArr.push([x, y]);
        }
      };
      el.onmouseup = () => {
        isDrag = false;
        this.animateArr.push(-1);
      };
      el.onmouseout = () => {
        el.onmouseup();
      };
    }
    animateGo() {
      const { canvas: c } = this;
      this.clear();
      c.beginPath();
      const loop = (animate, i) => {
        if (i < animate.length - 1) {
          const arr = animate[i];
          if (arr === -1) {
            c.beginPath();
          } else {
            c.lineTo(arr[0], arr[1]);
            c.stroke();
          }
          i++;
          this.timeId = setTimeout(() => {
            loop(animate, i);
          }, 10);
        }
      };
      loop(this.animateArr, 0);
    }
    clear() {
      const { canvas: c } = this;
      const { width, height } = this.element;
      c.clearRect(0, 0, width, height);
    }
  }
  const g = new Draw("#cvs", 600, 500);
  g.init();
  document.getElementById("btn1").onclick = () => {
    g.animateGo();
  };
  document.getElementById("btn2").onclick = () => {
    g.clear();
    g.animateArr = [];
  };
  document.getElementById("btn3").onclick = () => {
    const canvas = document.querySelector("#cvs");
    const dataURL = canvas.toDataURL();
    // 将dataURL发送到服务器进行保存操作
    console.log(dataURL);
  };
</script>
